// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

//
// Color system
//

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$grays: () !default;
$grays: map-merge((
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
), $grays);

$blue:    #1890ff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffe207 !default;
$green:   #32b643 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
), $colors);

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $blue,
  "secondary":  $gray-600,
  "success":    $green,
  "info":       $cyan,
  "warning":    $yellow,
  "danger":     $red,
  "light":      $gray-100,
  "dark":       $gray-800
), $theme-colors);


// Set a specific jump point for requesting color jumps
$theme-color-interval:      8% !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;


// Options
//
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:              true !default;
$enable-rounded:            true !default;
$enable-shadows:            true !default;
$enable-gradients:          false !default;
$enable-transitions:        false !default;
$enable-hover-media-query:  false !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       false !default;


// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: rem2px(1) !default;
$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
) !default;

// This variable affects the `.h-*` and `.w-*` classes.
$sizes: (
  25: 25%,
  50: 50%,
  75: 75%,
  100: 100%
) !default;

$text-elements: i, b, a, p, h1, h2, h3, h4, h5, h6,
label, cite, small, strong, text, textview, textedit, password, button;

// Body
//
// Settings for the `<body>` element.

$body-bg:                   $white !default;
$body-color:                $gray-900 !default;

// Links
//
// Style anchor elements.

$link-color:                theme-color("primary") !default;
$link-decoration:           none !default;
$link-hover-color:          darken($link-color, 15%) !default;
$link-hover-decoration:     underline !default;

// Paragraphs
//
// Style p element.

$paragraph-margin-bottom:   rem2px(1) !default;


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-default-max-width: 960px;
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;


// Components
//
// Define common padding and border radius sizes and more.

$line-height-lg:              1.5 !default;
$line-height-sm:              1.5 !default;

$border-width:                1px !default;
$border-color:                $gray-200 !default;
$border-radius:               4px !default;
$border-radius-lg:            6px !default;
$border-radius-sm:            3px !default;

$box-shadow-sm:               0 rem2px(.125) rem2px(.25) rgba($black, .075) !default;
$box-shadow:                  0 rem2px(.5) rem2px(1) rgba($black, .15) !default;
$box-shadow-lg:               0 rem2px(1) rem2px(3) rgba($black, .175) !default;

$box-shadow-wrapper-padding:  rem2px(.5) rem2px(1) rem2px(1.5) rem2px(1) !default;

$component-active-color:      $white !default;
$component-active-bg:         theme-color("primary") !default;

// Fonts
//
// Font, line-height, and color for body text, headings, and more.

$font-color-base:             #333;
$font-family-cjk:             "Microsft YaHei", "Malgun Gothic", "Noto Sans CJK SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", simsun !default;
$font-family-base:            "Segoe UI", Roboto, "Helvetica Neue", Arial, Ubuntu, $font-family-cjk !default;
$font-family-monospace:       "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Ubuntu Mono", "Courier New", $font-family-cjk !default;

$font-size-base:              rem2px(1) !default; // Assumes the browser default, typically `16px`
$font-size-lg:                rem2px(1.25) !default;
$font-size-sm:                rem2px(.875) !default;

$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;

$font-weight-base:            $font-weight-normal !default;
$line-height-base:            1.5 !default;

$h1-font-size:                rem2px(2.5) !default;
$h2-font-size:                rem2px(2) !default;
$h3-font-size:                rem2px(1.75) !default;
$h4-font-size:                rem2px(1.5) !default;
$h5-font-size:                rem2px(1.25) !default;
$h6-font-size:                rem2px(1) !default;

$headings-margin-bottom:      ($spacer / 2) !default;
$headings-font-family:        $font-family-base !default;
$headings-font-weight:        600 !default;
$headings-line-height:        1.33 !default;
$headings-color:              $font-color-base !default;

$lead-font-size:              ($font-size-base * 1.25) !default;
$lead-font-weight:            300 !default;

$small-font-size:             ($font-size-base * 0.8) !default;

$text-muted:                  $gray-600 !default;

$hr-border-color:             rgba($black,.1) !default;
$hr-border-width:             $border-width !default;

$blockquote-border-color:     $gray-200 !default;
$blockquote-border-width:     rem2px(.2) !default;


// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

$input-btn-padding-y:         rem2px(.375) !default;
$input-btn-padding-x:         rem2px(.75) !default;
$input-btn-line-height:       $line-height-base !default;

$input-btn-focus-width:       rem2px(.2) !default;
$input-btn-focus-color:       rgba(theme-color("primary"), .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

$input-btn-padding-y-sm:      rem2px(.25) !default;
$input-btn-padding-x-sm:      rem2px(.5) !default;
$input-btn-line-height-sm:    $line-height-sm !default;

$input-btn-padding-y-lg:      rem2px(.5) !default;
$input-btn-padding-x-lg:      rem2px(1) !default;
$input-btn-line-height-lg:    $line-height-lg !default;

$input-btn-border-width:      $border-width !default;


// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.

$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              0 1px 0 rgba($white,.15) !default;
$btn-focus-box-shadow:        0 0 0 3px rgba(theme-color("primary"), .25) !default;
$btn-active-box-shadow:       0 3px 5px rgba($black,.125) !default;

$btn-link-disabled-color:     $gray-600 !default;

$btn-block-spacing-y:         rem2px(.5) !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius !default;
$btn-border-radius-lg:        $border-radius-lg !default;
$btn-border-radius-sm:        $border-radius-sm !default;
$btn-border-width:            $border-width !default;
$btn-border-color:            $border-color !default;
$btn-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;


// Forms

$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
$input-line-height:                     $input-btn-line-height !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-line-height-sm:                  $input-btn-line-height-sm !default;

$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-line-height-lg:                  $input-btn-line-height-lg !default;

$input-bg:                              $white !default;
$input-disabled-bg:                     $gray-200 !default;

$input-color:                           $gray-700 !default;
$input-border-color:                    $gray-400 !default;
$input-border-width:                    $input-btn-border-width !default;

$input-border-radius:                   $border-radius !default;
$input-border-radius-lg:                $border-radius-lg !default;
$input-border-radius-sm:                $border-radius-sm !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              lighten(theme-color("primary"), 25%) !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

$input-placeholder-color:               $gray-600 !default;

$input-height-border:                   $input-btn-border-width * 2 !default;

$input-height-inner:                    ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
$input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;

$input-height-inner-sm:                 ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
$input-height-sm:                       calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;

$input-height-inner-lg:                 ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
$input-height-lg:                       calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;

$form-text-margin-top:                  rem2px(.25) !default;

$form-check-margin-bottom:              rem2px(.5) !default;
$form-check-input-gutter:               rem2px(1.25) !default;
$form-check-input-margin-y:             rem2px(.25) !default;
$form-check-input-margin-x:             rem2px(.25) !default;

$form-check-inline-margin-x:            rem2px(.75) !default;

$form-group-padding-x:                   $input-focus-width !default;
$form-group-padding-top:                 $input-focus-width !default;
$form-group-padding-bottom:              rem2px(1) - $input-focus-width !default;

$form-margin-top:                       -$form-group-padding-top !default;
$form-margin-x:                         -$form-group-padding-x !default;

$input-group-addon-color:               $input-color !default;
$input-group-addon-bg:                  $gray-200 !default;
$input-group-addon-border-color:        $input-border-color !default;


// Form validation
$form-feedback-margin-top:          $form-text-margin-top !default;
$form-feedback-font-size:           $small-font-size !default;
$form-feedback-valid-color:         theme-color("success") !default;
$form-feedback-invalid-color:       theme-color("danger") !default;


// Dropdowns
//
// Dropdown menu container and contents.

$dropdown-min-width:                rem2px(10) !default;
$dropdown-padding-y:                rem2px(.5) !default;
$dropdown-spacer:                   rem2px(.125) !default;
$dropdown-bg:                       $white !default;
$dropdown-border-color:             rgba($black, .15) !default;
$dropdown-border-radius:            $border-radius !default;
$dropdown-border-width:             $border-width !default;
$dropdown-divider-bg:               $gray-200 !default;
$dropdown-box-shadow:               0 rem2px(.5) rem2px(1) rgba($black, .15) !default;

$dropdown-link-color:               $gray-900 !default;
$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
$dropdown-link-hover-bg:            $gray-100 !default;

$dropdown-link-active-color:        $component-active-color !default;
$dropdown-link-active-bg:           $component-active-bg !default;

$dropdown-link-disabled-color:      $gray-600 !default;

$dropdown-item-padding-y:           rem2px(.25) !default;
$dropdown-item-padding-x:           rem2px(1.5) !default;

$dropdown-header-color:             $gray-600 !default;


// Tooltips

$tooltip-font-size:                 $font-size-sm !default;
$tooltip-max-width:                 200px !default;
$tooltip-color:                     $white !default;
$tooltip-bg:                        $black !default;
$tooltip-border-radius:             $border-radius !default;
$tooltip-opacity:                   .9 !default;
$tooltip-padding-y:                 rem2px(.25) !default;
$tooltip-padding-x:                 rem2px(.5) !default;
$tooltip-margin:                    0 !default;

$tooltip-arrow-width:               rem2px(.8) !default;
$tooltip-arrow-height:              rem2px(.4) !default;
$tooltip-arrow-color:               $tooltip-bg !default;


// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.

$zindex-dropdown:                   1000 !default;
$zindex-modal-backdrop:             1040 !default;
$zindex-modal:                      1050 !default;
$zindex-message-notice:             1060 !default;
$zindex-notification-notice:        1060 !default;
$zindex-tooltip:                    1070 !default;

// Navs

$nav-link-padding-y:                rem2px(.5) !default;
$nav-link-padding-x:                rem2px(1) !default;
$nav-link-disabled-color:           $gray-600 !default;

$nav-tabs-border-color:             #ddd !default;
$nav-tabs-border-width:             $border-width !default;
$nav-tabs-border-radius:            $border-radius !default;
$nav-tabs-link-hover-border-color:  $gray-200 !default;
$nav-tabs-link-active-color:        $gray-700 !default;
$nav-tabs-link-active-bg:           $body-bg !default;
$nav-tabs-link-active-border-color: #ddd !default;

$nav-pills-border-radius:           $border-radius !default;
$nav-pills-link-active-color:       $component-active-color !default;
$nav-pills-link-active-bg:          $component-active-bg !default;

// Navbar

$navbar-padding-y:                  ($spacer / 2) !default;
$navbar-padding-x:                  $spacer !default;

$navbar-brand-font-size:            $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-height:               ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
$navbar-brand-padding-y:            ($navbar-brand-height - $nav-link-height) / 2 !default;

$navbar-toggler-padding-y:          rem2px(.25) !default;
$navbar-toggler-padding-x:          rem2px(.75) !default;
$navbar-toggler-font-size:          $font-size-lg !default;
$navbar-toggler-border-radius:      $btn-border-radius !default;

$navbar-dark-color:                 rgba($white,.7) !default;
$navbar-dark-hover-color:           rgba($white,.85) !default;
$navbar-dark-active-color:          $white !default;
$navbar-dark-disabled-color:        rgba($white,.25) !default;
$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-dark-toggler-border-color:  rgba($white,.1) !default;

$navbar-light-color:                rgba($black,.5) !default;
$navbar-light-hover-color:          rgba($black,.7) !default;
$navbar-light-active-color:         rgba($black,.9) !default;
$navbar-light-disabled-color:       rgba($black,.3) !default;
$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-toggler-border-color: rgba($black,.1) !default;


// Modals

// Padding applied to the modal body
$modal-inner-padding:         rem2px(1) !default;

$modal-dialog-margin:         rem2px(.5) !default;
$modal-dialog-margin-y-sm-up: rem2px(1.75) !default;

$modal-title-line-height:           $line-height-base !default;

$modal-content-bg:               $white !default;
$modal-content-border-color:     rgba($black, .2) !default;
$modal-content-border-width:     $border-width !default;
$modal-content-box-shadow-xs:    0 rem2px(.25) rem2px(.5) rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 rem2px(.5) rem2px(1) rgba($black, .5) !default;

$modal-backdrop-bg:           $black !default;
$modal-backdrop-opacity:      .5 !default;
$modal-header-border-color:   $gray-200 !default;
$modal-footer-border-color:   $modal-header-border-color !default;
$modal-header-border-width:   $modal-content-border-width !default;
$modal-footer-border-width:   $modal-header-border-width !default;
$modal-header-padding:        rem2px(1) !default;

$modal-lg:                          800px !default;
$modal-md:                          500px !default;
$modal-sm:                          300px !default;

$modal-transition:                  transform .3s ease-out !default;


// Alerts
//
// Define alert colors, border radius, and padding.

$alert-padding-y:                   rem2px(.75) !default;
$alert-padding-x:                   rem2px(1.25) !default;
$alert-margin-bottom:               rem2px(1) !default;
$alert-border-radius:               $border-radius !default;
$alert-link-font-weight:            $font-weight-bold !default;
$alert-border-width:                $border-width !default;


// List group

$list-group-bg:                     $white !default;
$list-group-border-color:           rgba($black, .125) !default;
$list-group-border-width:           $border-width !default;
$list-group-border-radius:          $border-radius !default;

$list-group-item-padding-y:         rem2px(.75) !default;
$list-group-item-padding-x:         rem2px(1.25) !default;

$list-group-hover-bg:               $gray-100 !default;
$list-group-active-color:           $component-active-color !default;
$list-group-active-bg:              $component-active-bg !default;
$list-group-active-border-color:    $list-group-active-bg !default;

$list-group-disabled-color:         $gray-600 !default;
$list-group-disabled-bg:            $list-group-bg !default;

$list-group-action-color:           $gray-700 !default;
$list-group-action-hover-color:     $list-group-action-color !default;

$list-group-action-active-color:    $body-color !default;
$list-group-action-active-bg:       $gray-200 !default;


// Close

$close-font-size:                   $font-size-base * 1.5 !default;
$close-font-weight:                 $font-weight-bold !default;
$close-color:                       $black !default;


// Rate

$rate-star-size:                    $font-size-base * 1.5 !default;
$rate-star-color:                   $orange !default;
$rate-star-void-color:              $gray-400 !default;


// Switch

$switch-height: 20px;
$switch-border-width: 2px;
$switch-border-radius: $switch-height / 2;
$switch-margin-left: $font-size-base / 2;
$switch-slider-width: $switch-height - $switch-border-width * 2;
$switch-icon-width: $switch-height;
$switch-icon-height: $switch-height - $switch-border-width * 2;
$switch-bar-width: $switch-icon-width * 2 + $switch-slider-width;
$switch-width: $switch-icon-width + $switch-slider-width + $switch-border-width * 2;
$switch-checked-color: $primary;
$switch-color: $text-muted;


// CheckBox

$checkbox-size: $font-size-base + 2px;
$checkbox-border-width: 1px;
$checkbox-border-color: $border-color;
$checkbox-checked-color: $primary;
$checkbox-disabled-bg: $gray-100;
$checkbox-disabled-color: $gray-600;


// Radio

$radio-size: $font-size-base + 2px;
$radio-border-width: 1px;
$radio-border-color: $border-color;
$radio-inner-icon-margin: 3px;
$radio-inner-icon-size: $radio-size - $radio-border-width * 2 - $radio-inner-icon-margin * 2;
$radio-checked-color: $primary;
$radio-disabled-bg: $gray-100;
$radio-disabled-color: $gray-600;


// Message

$message-notice-bg: $white;
$message-notice-icon-size: $font-size-base * 1.5;
$message-notice-padding-x: map-get($spacers, 3);
$message-notice-padding-y: map-get($spacers, 2);
$message-notice-border: $border-width solid $border-color;

// Notification

$notification-color: $gray-600;
$notification-margin-bottom: map-get($spacers, 3);
$notification-notice-bg: $white;
$notification-notice-icon-size: $font-size-base * 1.725;
$notification-notice-title-size: 16px;
$notification-notice-title-margin-bottom: map-get($spacers, 2);
$notification-notice-padding-x: map-get($spacers, 4);
$notification-notice-padding-y: map-get($spacers, 3);
$notification-notice-border: $border-width solid $border-color;
